<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style>
		ul{ list-style: none; }
		*{ margin: 0;padding: 0; }
		#ads{
			width: 590px; height: 250px;
			border: 15px solid #999;
			margin: 20px auto;
			position: relative;
		}
		#ads img{
			width: 100%; height: 100%;
			position: absolute;
			left: 0; top: 0;
			display: none;
		}
		#ads img.show{ display: block; }
		#ads ul{
			position: absolute;
			bottom: 10px; left: 240px; 
		}
		#ads ul li{
			width: 12px; height: 12px;
			float: left;
			background: rgba(255,255,255,0.7);
			margin-right: 8px;
			border-radius: 50%;
			cursor: pointer;
		}
		#ads ul li.active{ background: orange; }
	</style>
	<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
	<script>
	$(function(){
		var timer = null;
		var cur = 0;
		var len = $("#ads li").length;

		//鼠标滑过容器停止播放
		$("#ads").hover(function(){
			clearInterval(timer);
		},function(){
			showImg();
		});
		// 遍历所有圆点导航实现划过切换至对应的图片
		$("#ads li").click(function(){
			clearInterval(timer);
			cur = $(this).index();
			$(this).addClass("active").siblings().removeClass("active");
			$("#ads img").eq(cur).fadeIn(200).siblings("img").fadeOut(200);
		});

		//定义图片切换函数
		function showImg(){
			timer = setInterval(function(){
				cur++;
				if( cur>=len ){ cur=0; }
				$("#ads img").eq( cur ).fadeIn(200).siblings("img").fadeOut(200);
				$("#ads li ").eq( cur ).addClass("active").siblings().removeClass("active");
				
			},1000);
		}
		showImg();
	});
	</script>
</head>
<body>
	<div id="ads">
        <img src="./images/img1.jpg" alt="" class="show" />
        <img src="./images/img2.jpg" alt="" />
        <img src="./images/img3.jpg" alt="" />
        <img src="./images/img4.jpg" alt="" />
        <img src="./images/img5.jpg" alt="" />
        <img src="./images/img6.jpg" alt="" />
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
	</div>
</body>
</html>